<template>
  <div class="hot">
    <div class="hot_content">
      <img src="../assets/icon33-1.png" alt>
      <div class="hot_swiper">
        <van-swipe :autoplay="3000" vertical :height="35" :touchable=false>
          <van-swipe-item>我乃哲龙山上一莽夫</van-swipe-item>
          <van-swipe-item>无名无姓存世中</van-swipe-item>
          <van-swipe-item>后遂主席干老蒋</van-swipe-item>
          <van-swipe-item>大恩难忘故姓毛</van-swipe-item>
        </van-swipe>
      </div>
      <van-icon name="arrow" class="hot_arrow" @click="con"/>
    </div>

    <div class="hot_pic">
      <van-row gutter="10">
        <van-col span="24">
          <img class="hot_first" src="http://www.nrbnrd.com/uploads/20190402/15f649e5f96976552e43e06e43309efb.jpg">
        </van-col>
        <van-col span="12">
            <img class="hot_second" src="http://www.nrbnrd.com/uploads/20190402/01edda1bc82e0c021e6b5a95aefefea7.jpg">
        </van-col>
        <van-col span="12">
            <img class="hot_second" src="http://www.nrbnrd.com/uploads/20190402/f0d4979be7b5cbef26f7cd6faa59d2f7.jpg">
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    con() {
      console.log(123);
    }
  }
};
</script>

<style>
.hot {
  margin-top: 10px;
  margin-bottom:10px; 
  border-top: 1px #f5f6fa solid;
  border-bottom: 1px #f5f6fa solid;
  padding: 10px 10px 20px 10px;
}

.hot .hot_content img {
  float: left;
  width: 54px;
}
.hot .hot_content {
  margin-bottom: 20px;
}
.hot .hot_swiper {
  height: 30px;
  overflow: hidden;
  font-size: 14px;
  width: 70%;
  float: left;
}
.hot .hot_arrow {
  float: right;
  padding-top: 4px;
}
.hot .hot_first{
    height: 100px;
    width: 100%;
}
.hot .hot_second{
    width: 100%;
    /* margin-right:30px;  */
    
}
</style>
